<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="getPageData"
      ></pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="state.columns"
          :data="state.tableData"
          :loading="tableLoading"
        >
          <template v-slot:success="scope">
            <div>
              {{ scope.row.success ? '登录成功' : '登录失败' }}
            </div>
          </template>
        </pub-table>
      </div>
      <pub-pagination
        :total="total"
        v-model:page="state.searchForm.pageNum"
        v-model:limit="state.searchForm.pageSize"
        @pagination="getPageData"
      />
    </div>
  </div>
</template>

<script setup>
import { getLoginLogs } from '@/api/system'
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
import { Sm4Dncrypt } from '@/utils/encryption.js'
const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo

const isEdit = ref(false)
const roleIds = ref('')
const editId = ref('')
const dialogFormVisible_role = ref(false)
const dialogFormVisible_add = ref(false)
const popTitle = ref('')
const tableLoading = ref(false)
const total = ref(0)
const state = reactive({
  searchColumns: [
    {
      label: '登录名',
      el: 'Input',
      bind: 'username',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '姓名',
      el: 'Input',
      bind: 'realName',
      defaultValue: '',
      labelWidth: 50
    },
    {
      label: '登录时间',
      el: 'DateRange',
      bindBegin: 'loginTimeStart',
      bindEnd: 'loginTimeEnd',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '登录端',
      el: 'DictSelect',
      bind: 'source',
      defaultValue: '',
      code: 'DLD',
      labelWidth: 80
    },
    {
      label: 'IP',
      el: 'Input',
      bind: 'ip',
      defaultValue: '',
      labelWidth: 50
    },
    {
      label: '登录状态',
      el: 'DictSelect',
      bind: 'success',
      defaultValue: '',
      code: 'DLZT',
      labelWidth: 80
    }
  ],
  tableData: [],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  columns: [
    { label: '登录名', prop: 'username', width: 180 },
    { label: '姓名', prop: 'realName', width: 120 },
    { label: '登录时间', prop: 'loginTime', width: 180 },
    { label: '登出时间', prop: 'logoutTime', width: 180 },
    {
      label: '登录状态',
      slot: 'success'
    },
    {
      label: 'IP',
      prop: 'ip'
    },
    {
      label: '登录端',
      prop: 'source'
    }
  ]
})
const dialogEditRef = ref(null)

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getLoginLogs(state.searchForm)
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

onMounted(() => {
  getPageData()
})
</script>
<style scoped>
/* 当列表有两行筛选条件使用 */
.table-container {
  height: calc(100% - 130px);
  flex: 1;
}
.table-web {
  height: 100% !important;
}
/* 当列表有两行筛选条件使用 */
</style>
